<template>
    <div>
      <common-card title="累计订单量" :value="orderToday">
        <template>
<!--          <div id="total-order-chart" :style="{ width: '100%', height: '100%' }">-->
<!--          </div>-->
          <vue-echarts :options="getOptions()"></vue-echarts>
        </template>
        <template v-slot:footer >
          <div>
            <span>昨日订单量 </span>
            <span class="emphasis">{{orderLastDay}}</span>
          </div>
        </template>
      </common-card>
    </div>
</template>

<script>
  import CommonCardMixin from '../../utils/CommonCardMixin'
  import CommonDataMixin from '../../utils/CommonDataMixin'
export default {
  name: 'TotalOrder',
  mixins: [CommonCardMixin, CommonDataMixin],
  mounted () {
    // const chartDom = document.getElementById('total-order-chart')
    // // console.log(this.$echarts)
    // const chart = this.$echarts.init(chartDom)
    // chart.setOption({
    //   xAxis: {
    //     type: 'category',
    //     show: false,
    //     boundaryGap: false
    //   },
    //   yAxis: {
    //     show: false
    //   },
    //   series: [
    //     {
    //       type: 'line',
    //       data: [620, 432, 220, 546, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 630],
    //       areaStyle: {
    //         color: 'purple'
    //       },
    //       lineStyle: {
    //         width: 0
    //       },
    //       itemStyle: {
    //         opacity: 0
    //       },
    //       smooth: true
    //     }
    //   ],
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   }
    // })
  },
  methods: {
    getOptions () {
      return this.orderTrend.length > 0 ? {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'line',
            data: this.orderTrend,
            areaStyle: {
              color: 'purple'
            },
            lineStyle: {
              width: 0
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      } : null
    }
  }
}
</script>

<style scoped>

</style>
